<template>
  <div class="box">
    <van-checkbox-group v-model="result">
      <div class="list" v-for="item in cartList" :key="item.goods_id">
        <van-checkbox :name="item.goods_id">
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          >
          <template #footer>
            <van-stepper v-model="value" v-if="show" />
          </template>
          </van-card>
        </van-checkbox>
      </div>
    </van-checkbox-group>

    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedALL">全选</van-checkbox>
      <template #tip>
         累计共{{cartTotal.checkedGoodsCount}}件商品，可点击 
        <van-button :type="show?'danger':'primary'" size="small" @click="show=!show">{{show?'完成编辑':'编辑'}}</van-button>
         按钮进行商品数量修改 
      </template>
    </van-submit-bar>
  </div>
</template>
 
<script>
import {
  CartAPI,
  CartUpdata,
  CartChecked,
  delCartProduct,
} from "../request/api";

export default {
  data() {
    return {
      result: [],
      cartTotal: [],
      cartList: [],
      checkedALL:false,
      show:false
    };
  },
  methods: {
    onSubmit(){}
  },
  created() {
    CartAPI().then((res) => {
      this.cartList = res.data.cartList;
      this.cartTotal = res.data.cartTotal;
      console.log(res);
    });
  },
};
</script>
 
<style lang = "less" scoped>
.box{
  padding-bottom: 130px;
}
.list {
  background: #fff;
  padding: 10px 15px;
  margin-bottom: 10px;
  /deep/.van-checkbox__label {
    width: 100%;
    .van-card {
      width: 100%;
    }
  }
}
.van-submit-bar{
  bottom: 50px;
}
</style>